/*
Theme Name: Makiko
Theme URI: http://cdog.me/makiko
Version: 0.2.2
Author: CDog
Author URI: http://cdog.me
Description: Start a WordPress theme here.
Text Domain: startpress
*/
/* 定义 WordPress 主题信息 */

/* Reset */
/* 一些通用的清除和 HTML5 定义，如果需要。注意 @import 可能导致一定的效率问题*/
/* @import url('src/reset.css'); */

html, body {
	/*background-color: rgb(242, 234, 234);*/
	margin: 0;
	padding: 0;
	height: 100%;
	width : 100%;
	line-height: 1.7;
	position: relative;

}
pre{
	overflow:scroll;
}
blockquote{
  border-left: rgb(255, 98, 98) solid 5px;
  padding-left: 20px;
}

/* Common */
/* 在这里格式化标签和定义通用类。 */

p, q, blockquote, li, a ,div{
	font-size: 14px;
}

.meta-info p,a,ul,ol,li{
	font-size: small;
}
#sidebar  p,a,ul,ol,li{
        font-size: small;
}


@font-face {
      font-family: 'fontello';
      src: url('./src/font/fontello.eot?51030354');
      src: url('./src/font/fontello.eot?51030354#iefix') format('embedded-opentype'),
           url('./src/font/fontello.woff?51030354') format('woff'),
           url('./src/font/fontello.ttf?51030354') format('truetype'),
           url('./src/font/fontello.svg?51030354#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
h1, h2, h3, h4, h5, h6, p, q, blockquote, li, a ,div{
	font-family: "Segeo UI Mono", "Hiragino Sans GB", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "Droid Sans Fallback", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei", "Apple LiGothic Medium", "SimHei", "ST Heiti", "WenQuanYi Zen Hei Sharp", Sans;
	color: #454647;
}
a{
	text-decoration: none;
	color: black;
	  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.42);
}
h2 a{
	text-shadow:initial;
}
a { -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
a:hover { color:#ff6262;}
.makiiro{
	background-color: rgb(255, 98, 98);
}
.makiiro-monji , .makiiro-monji h2{
	color: rgb(255, 98, 98);
}
.blog-meta{
	text-align: center;
}
.navmenu{
	margin: 0px auto;
	width: 90%;
	padding: 0;
}
nav#navbar ul.sub-menu{
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	padding-bottom: 5px;
	box-shadow: 11px 6px 5px #888888;
	width: 210px;
	}




/* 对于文章内图片的宽度自适应。请将 article 改为文章内容容器，范围越小越不容易导致误伤。 */
article img , article .wp-caption {
	max-width: 100% !important;

}
.menu-item{
	display: inline-block;
	height: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-item a{
	padding: 5px 10px;
	text-decoration: none;
	line-height: 40px;
	font-size: 20px;
	color: white;
	display: inline-block;
	transition:background-color 0.5s;
	-moz-transition:background-color 0.5s; /* Firefox 4 */
	-webkit-transition:background-color 0.5s; /* Safari and Chrome */
	-o-transition:background-color 0.5s; /* Opera */
}

header#header{

	  /*margin-top: -21px;*/
	  height:600px;
}
nav.nav{
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	float: left;
	z-index: 99
}
#main-banner{
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	height: 100%
}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

/* Main */
/* 开始主体样式。推荐将布局和样式分离。 */

#page {
	/*width: 90%;*/
	/*margin: 0 auto;*/
}

/* 自适应主题下日历小工具布局的自动调整(如果需要) */

#wp-calendar td {
	width: 1%; height: 20px;
}

#wp-calendar caption {
	font-weight: bold;
	margin-bottom: 5px;
	margin-left: -5px;
}
div#blog-title{
	padding-top: 102px;
}

div#blog-title a{
	
	text-decoration: none;
	font-size: 56px;
	color: rgb(255, 255, 255);
}

.sub-menu .menu-item{
	float: none;
}
.sub-menu .menu-item a{
	padding: 0;
	margin: 5px 0px;
	width: 100%;
}
.menu-item a:hover{
	background-color: #FCA6A6;
}

/*main*/
#content{
	width: 1035px;
	padding: 0 45px;
	margin: 0px auto;
	margin-top: 50px;
	margin-bottom: 100px;
}

#main-left{
	float: left;
	width: 75%;
}
#sidebar{
	float: right;
	width:25%;
}
#sidebar ul{
  margin: 0;
  padding: 0;
}
.cols{
	
	
	border-radius: 10px;
	overflow: hidden;

}
footer#footer{
	padding: 18px;
	box-shadow: 0px 1px 0px #888888;
	/* background-image: url('./src/img/maki.png'); */
	background-repeat: no-repeat;
	background-size: 15%;
	background-position-x: 90%;
	background-position-y: 29%;
}
footer a{
	color:rgb(250, 215, 215);
}
#hitokoto a{
	color: white;
	text-decoration: none;
	font-size: 15px;
}
#footinner{
	width: auto;
	margin: 0;
	text-align: center;
	/* padding-top: 10px; */
}
#footinner p{
	color:rgb(255, 159, 159);
	font-size: 12px;
}


.article-inner{
	padding: 36px;
	background-color: white;
	box-shadow: 0px 2px 5px#888888;
}
/* Mobile */
/* 移动版响应式部分。 */

.inner-left{
  margin: 20px 140px 20px 0px;
}
.inner-right{
	margin: 20px 0px 20px 0px;
}
.atk{
	margin: 80px 0px;
	border-top: dotted 1px rgb(255, 98, 98);

}
.icon{
	font-family: "fontello";
}
.meta-info{
	display: inline-block;
	  margin: 0px 5px;
	
}
.meta-info a{
	display: inline-block;
	margin: 0px 2px;
	text-decoration: none;
}

h2 a{
	font-size: inherit;
	text-decoration: none;
}
article.atk header{
	display: inline-block;
	border-bottom: solid 1px rgb(255, 98, 98);
	margin: 20px 0px;
}
article.atk img{
	max-width:100%;
	height:auto;
}
.atk-nav{
	border-top: dotted 1px rgb(255, 98, 98);
}
.atk-nav a{
	text-decoration: none;
}
#p_n_l{
	float: left;
}
#p_n_r{
	float: right;
}

#page-nav{
	border-bottom: dotted 1px rgb(255, 98, 98);
	display: inline-block;
	margin: 0 auto;
}
.page-numbers{
	text-decoration: none;
	margin: 0 10px;
}
span.current{
	font-size: small;
	display: inline-block;
	border-top: dotted 1px rgb(255, 98, 98);
	color: rgb(255, 98, 98);
}
.noborder{
	border: none;
}

#sidebar li{
	list-style: none;
}
.line{
  height: 40px;
  width: 40%;
  border-bottom: solid 1px rgb(255, 98, 98);
}
.cat-item {
	display: inline-block;
	margin: 10px;

}
#tr_search{
	  margin: 40px 0px;
  height: 30px;
  width: 56%;
}
#go-sigh{
	   margin-top: 116px;
  display: inline-block;

  font-size: 35px;
  /* border-radius: 7px; */
border: rgb(255, 98, 98) solid 1px;
  cursor: pointer;
  color: white;
  transition: background 0.5s, color 0.5s ,border 0.5s;
}

#go-sigh:hover{
	background: rgba(255,255,255,0.6);
    color: rgb(255, 98, 98);
    border: none;
}
/*CSSLoad*/
#circleG{
width:149.33333333333334px;
}

.circleG{
background-color:#FFFFFF;
float:left;
height:32px;
margin-left:17px;
width:32px;
-moz-animation-name:bounce_circleG;
-moz-animation-duration:1.2000000000000002s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-moz-border-radius:21px;
-webkit-animation-name:bounce_circleG;
-webkit-animation-duration:1.2000000000000002s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-border-radius:21px;
-ms-animation-name:bounce_circleG;
-ms-animation-duration:1.2000000000000002s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:normal;
-ms-border-radius:21px;
-o-animation-name:bounce_circleG;
-o-animation-duration:1.2000000000000002s;
-o-animation-iteration-count:infinite;
-o-animation-direction:normal;
-o-border-radius:21px;
animation-name:bounce_circleG;
animation-duration:1.2000000000000002s;
animation-iteration-count:infinite;
animation-direction:normal;
border-radius:21px;
}

#circleG_1{
-moz-animation-delay:0.24000000000000005s;
-webkit-animation-delay:0.24000000000000005s;
-ms-animation-delay:0.24000000000000005s;
-o-animation-delay:0.24000000000000005s;
animation-delay:0.24000000000000005s;
}

#circleG_2{
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#circleG_3{
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

@-moz-keyframes bounce_circleG{
0%{
}

50%{
background-color:#FF6262}

100%{
}

}

@-webkit-keyframes bounce_circleG{
0%{
}

50%{
background-color:#FF6262}

100%{
}

}

@-ms-keyframes bounce_circleG{
0%{
}

50%{
background-color:#FF6262}

100%{
}

}

@-o-keyframes bounce_circleG{
0%{
}

50%{
background-color:#FF6262}

100%{
}

}

@keyframes bounce_circleG{
0%{
}

50%{
background-color:#FF6262}

100%{
}

}

#Loading{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(255,255,255,0.7); /*暗淡的背景*/
}
#Loading #circleG{
	  position: absolute;
  top: 50%;
  height: 32px;
  left: 50%;
  margin-left: -75px;
  /* margin-top: -16px; */
  width: 150px;
}
#flyMeToTheMoon{
	display: none;
	cursor: pointer;
	position: fixed;
	right: 50px;
	bottom: 80px;
	width: 48px;
	height: 48px;
	z-index: 999;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	box-shadow: 0px 1px 8px 1.5px rgba(0, 0, 0, 0.35), 0px 20px 70px 8px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 1px 8px 1.5px rgba(0, 0, 0, 0.35), -5px 20px 70px 8px rgba(0, 0, 0, 0.25);

}
#flyMeToTheMoon #rocket{
	margin: 8px;
}
div#cmt{
  margin: 50px 10px;
  border-top: rgb(255, 98, 98) dotted 1px;
  padding: 50px 0;
}
div.nocomments{
  text-align: center;
  height: 100px;
  width: 100%;
  color: white;
}
div.nocomments p{
  line-height: 100px;
  color: white;
  font-size: 20px;
  margin: 0;
}
#makiPlayer{
position: fixed;
  bottom: 0;
  right: 50px;
}
#s_sb{
font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {

#page {
	width: 100%;
	overflow-x:hidden;
}

}

@media screen and (max-width: 1200px) {
	#content{
		width:960px;
	}

}
@media screen and (max-width: 980px) {
	#content{
		width:700px;
	}

}

@media screen and (max-width: 720px) {
	#content{
		width:80%;
	}
	#main-left{
		width:100%;
	}
	.inner-left{
		  margin-right: 0px;
	}
	#sidebar{
		display: none;
	}
	#makiPlayer{
		display:none;
	}
}
